<template>
  <view class="guide-container">
    <!-- 攻略分类导航 -->
    <view class="category-nav">
      <scroll-view scroll-x class="nav-scroll">
        <view class="nav-items">
          <view class="nav-item" 
                v-for="(category, index) in categories" 
                :key="index"
                :class="{ active: activeCategory === index }"
                @click="switchCategory(index)">
            <text class="nav-text">{{ category.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 攻略内容 -->
    <view class="guide-content">
      <!-- 戒烟准备 -->
      <view class="content-section" v-if="activeCategory === 0">
        <view class="guide-card card" v-for="(guide, index) in preparationGuides" :key="index">
          <view class="guide-header" @click="toggleGuide(guide)">
            <view class="guide-icon">{{ guide.icon }}</view>
            <view class="guide-title">
              <text class="title-text">{{ guide.title }}</text>
              <text class="title-desc">{{ guide.description }}</text>
            </view>
            <view class="expand-icon">{{ guide.expanded ? '▼' : '▶' }}</view>
          </view>
          <view class="guide-content-detail" v-if="guide.expanded">
            <rich-text :nodes="guide.content"></rich-text>
            <view class="guide-tips" v-if="guide.tips">
              <view class="tips-title">💡 小贴士</view>
              <view class="tips-list">
                <text class="tip-item" v-for="(tip, tipIndex) in guide.tips" :key="tipIndex">
                  • {{ tip }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 戒烟方法 -->
      <view class="content-section" v-if="activeCategory === 1">
        <view class="method-card card" v-for="(method, index) in quitMethods" :key="index">
          <view class="method-header">
            <view class="method-icon">{{ method.icon }}</view>
            <view class="method-info">
              <text class="method-name">{{ method.name }}</text>
              <view class="method-meta">
                <text class="difficulty">难度：{{ method.difficulty }}</text>
                <text class="success-rate">成功率：{{ method.successRate }}</text>
              </view>
            </view>
          </view>
          <view class="method-description">
            <text>{{ method.description }}</text>
          </view>
          <view class="method-steps">
            <text class="steps-title">实施步骤：</text>
            <view class="step-item" v-for="(step, stepIndex) in method.steps" :key="stepIndex">
              <text class="step-number">{{ stepIndex + 1 }}</text>
              <text class="step-text">{{ step }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 戒断症状应对 -->
      <view class="content-section" v-if="activeCategory === 2">
        <view class="symptom-card card" v-for="(symptom, index) in withdrawalSymptoms" :key="index">
          <view class="symptom-header">
            <text class="symptom-name">{{ symptom.name }}</text>
            <view class="symptom-duration">
              <text class="duration-text">持续时间：{{ symptom.duration }}</text>
              <view class="severity-level" :class="'level-' + symptom.severity">
                <text>{{ symptom.severityText }}</text>
              </view>
            </view>
          </view>
          <view class="symptom-description">
            <text>{{ symptom.description }}</text>
          </view>
          <view class="coping-strategies">
            <text class="strategies-title">应对策略：</text>
            <view class="strategy-list">
              <view class="strategy-item" v-for="(strategy, strategyIndex) in symptom.strategies" :key="strategyIndex">
                <view class="strategy-icon">{{ strategy.icon }}</view>
                <view class="strategy-content">
                  <text class="strategy-title">{{ strategy.title }}</text>
                  <text class="strategy-desc">{{ strategy.description }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 成功经验 -->
      <view class="content-section" v-if="activeCategory === 3">
        <view class="experience-card card" v-for="(experience, index) in successExperiences" :key="index">
          <view class="experience-header">
            <view class="user-avatar">{{ experience.avatar }}</view>
            <view class="user-info">
              <text class="user-name">{{ experience.userName }}</text>
              <text class="quit-info">戒烟 {{ experience.quitDays }} 天</text>
            </view>
            <view class="experience-rating">
              <text class="rating-text">{{ experience.rating }}⭐</text>
            </view>
          </view>
          <view class="experience-content">
            <text class="experience-text">{{ experience.content }}</text>
          </view>
          <view class="experience-tags">
            <text class="tag" v-for="(tag, tagIndex) in experience.tags" :key="tagIndex">
              # {{ tag }}
            </text>
          </view>
          <view class="experience-actions">
            <view class="action-btn" @click="likeExperience(experience)">
              <text class="action-icon">{{ experience.liked ? '❤️' : '🤍' }}</text>
              <text class="action-text">{{ experience.likes }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 专业建议 -->
      <view class="content-section" v-if="activeCategory === 4">
        <view class="advice-card card" v-for="(advice, index) in professionalAdvice" :key="index">
          <view class="advice-header">
            <view class="doctor-info">
              <view class="doctor-avatar">👨‍⚕️</view>
              <view class="doctor-details">
                <text class="doctor-name">{{ advice.doctorName }}</text>
                <text class="doctor-title">{{ advice.doctorTitle }}</text>
              </view>
            </view>
          </view>
          <view class="advice-content">
            <text class="advice-title">{{ advice.title }}</text>
            <rich-text :nodes="advice.content"></rich-text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const activeCategory = ref(0)

const categories = [
  { name: '戒烟准备', icon: '📋' },
  { name: '戒烟方法', icon: '🎯' },
  { name: '戒断症状', icon: '💊' },
  { name: '成功经验', icon: '🏆' },
  { name: '专业建议', icon: '👨‍⚕️' }
]

const preparationGuides = reactive([
  {
    icon: '🎯',
    title: '制定戒烟计划',
    description: '科学规划是成功的第一步',
    expanded: false,
    content: '<p><strong>制定详细戒烟计划：</strong></p><ul><li>选择合适的戒烟日期</li><li>告知家人朋友获得支持</li><li>清除所有吸烟用品</li><li>预备应对戒断症状的方法</li></ul>',
    tips: ['选择压力较小的时期开始戒烟', '提前1-2周开始减少吸烟量']
  },
  {
    icon: '🧠',
    title: '心理准备',
    description: '调整心态，做好心理建设',
    expanded: false,
    content: '<p><strong>心理准备要点：</strong></p><ul><li>认识戒烟的重要性</li><li>建立坚定的戒烟信念</li><li>学会应对负面情绪</li></ul>',
    tips: ['每天默念戒烟的理由', '想象健康生活的美好']
  }
])

const quitMethods = [
  {
    icon: '🛑',
    name: '突然戒烟法',
    difficulty: '⭐⭐⭐⭐⭐',
    successRate: '15-20%',
    description: '立即完全停止吸烟，不使用任何辅助手段。',
    steps: ['选定戒烟日期', '清除所有烟草制品', '告知周围人', '准备应对戒断症状']
  },
  {
    icon: '📉',
    name: '逐步减量法',
    difficulty: '⭐⭐⭐',
    successRate: '25-30%',
    description: '逐渐减少每日吸烟量，最终达到完全戒烟。',
    steps: ['记录当前吸烟习惯', '制定减量时间表', '每周减少20-25%', '最终完全停止']
  }
]

const withdrawalSymptoms = [
  {
    name: '尼古丁渴求',
    duration: '1-4周',
    severity: 5,
    severityText: '非常强烈',
    description: '对尼古丁的强烈渴望，这是最常见的戒断症状。',
    strategies: [
      { icon: '🌊', title: '深呼吸法', description: '进行深呼吸缓解渴求' },
      { icon: '🚶', title: '转移注意力', description: '进行其他活动分散注意力' }
    ]
  }
]

const successExperiences = reactive([
  {
    avatar: '👨',
    userName: '张先生',
    quitDays: 365,
    rating: 5,
    content: '戒烟一年了！最开始的两周是最难的，但坚持下来后发现生活质量真的提高了很多。',
    tags: ['运动戒烟', '替代习惯'],
    likes: 128,
    liked: false
  }
])

const professionalAdvice = [
  {
    doctorName: '王医生',
    doctorTitle: '呼吸科主任医师',
    title: '戒烟的最佳时机选择',
    content: '<p>现在就是最好的戒烟时机。每延迟一天，身体就多承受一天的损害。</p>'
  }
]

const switchCategory = (index) => {
  activeCategory.value = index
}

const toggleGuide = (guide) => {
  guide.expanded = !guide.expanded
}

const likeExperience = (experience) => {
  experience.liked = !experience.liked
  experience.likes += experience.liked ? 1 : -1
}
</script>

<style lang="scss" scoped>
.guide-container {
  padding: 0 0 120rpx 0;
}

.category-nav {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  .nav-scroll {
    .nav-items {
      display: flex;
      padding: 0 20rpx;
      
      .nav-item {
        flex-shrink: 0;
        padding: 16rpx 32rpx;
        margin-right: 20rpx;
        background: #f8f9fa;
        border-radius: 50rpx;
        transition: all 0.3s ease;
        
        &.active {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          
          .nav-text {
            color: #fff;
          }
        }
        
        .nav-text {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

.guide-content {
  .content-section {
    padding: 20rpx;
  }
}

.guide-card {
  margin-bottom: 20rpx;
  
  .guide-header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    
    .guide-icon {
      font-size: 48rpx;
      margin-right: 20rpx;
    }
    
    .guide-title {
      flex: 1;
      
      .title-text {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        margin-bottom: 8rpx;
      }
      
      .title-desc {
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .expand-icon {
      font-size: 24rpx;
      color: #667eea;
    }
  }
  
  .guide-content-detail {
    padding: 0 30rpx 30rpx;
    border-top: 1rpx solid #f0f0f0;
    
    .guide-tips {
      margin-top: 30rpx;
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      border-left: 4rpx solid #667eea;
      
      .tips-title {
        font-size: 26rpx;
        font-weight: 600;
        margin-bottom: 15rpx;
        color: #667eea;
      }
      
      .tip-item {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
        line-height: 1.6;
      }
    }
  }
}

.method-card {
  margin-bottom: 30rpx;
  
  .method-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .method-icon {
      font-size: 48rpx;
      margin-right: 20rpx;
    }
    
    .method-info {
      flex: 1;
      
      .method-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 8rpx;
      }
      
      .method-meta {
        display: flex;
        gap: 20rpx;
        
        .difficulty, .success-rate {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
  
  .method-description {
    margin-bottom: 25rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    font-size: 26rpx;
    line-height: 1.6;
  }
  
  .method-steps {
    .steps-title {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 15rpx;
    }
    
    .step-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12rpx;
      
      .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        background: #667eea;
        color: #fff;
        border-radius: 50%;
        font-size: 20rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
      }
      
      .step-text {
        flex: 1;
        font-size: 24rpx;
        line-height: 1.6;
      }
    }
  }
}

.symptom-card {
  margin-bottom: 30rpx;
  
  .symptom-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .symptom-name {
      font-size: 32rpx;
      font-weight: 600;
    }
    
    .symptom-duration {
      text-align: right;
      
      .duration-text {
        display: block;
        font-size: 22rpx;
        color: #666;
        margin-bottom: 8rpx;
      }
      
      .severity-level {
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        background: #ffebee;
        color: #f44336;
      }
    }
  }
  
  .symptom-description {
    margin-bottom: 20rpx;
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .coping-strategies {
    .strategies-title {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 15rpx;
    }
    
    .strategy-item {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .strategy-icon {
        font-size: 32rpx;
        margin-right: 15rpx;
      }
      
      .strategy-content {
        flex: 1;
        
        .strategy-title {
          display: block;
          font-size: 26rpx;
          font-weight: 500;
          margin-bottom: 4rpx;
        }
        
        .strategy-desc {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
}

.experience-card {
  margin-bottom: 30rpx;
  
  .experience-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .user-avatar {
      font-size: 48rpx;
      margin-right: 15rpx;
    }
    
    .user-info {
      flex: 1;
      
      .user-name {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 4rpx;
      }
      
      .quit-info {
        font-size: 22rpx;
        color: #666;
      }
    }
    
    .experience-rating {
      .rating-text {
        font-size: 24rpx;
        color: #ffa726;
      }
    }
  }
  
  .experience-content {
    margin-bottom: 20rpx;
    
    .experience-text {
      font-size: 26rpx;
      line-height: 1.6;
      color: #555;
    }
  }
  
  .experience-tags {
    margin-bottom: 20rpx;
    
    .tag {
      display: inline-block;
      padding: 6rpx 12rpx;
      background: #e3f2fd;
      color: #1976d2;
      border-radius: 20rpx;
      font-size: 22rpx;
      margin-right: 10rpx;
      margin-bottom: 8rpx;
    }
  }
  
  .experience-actions {
    display: flex;
    gap: 30rpx;
    
    .action-btn {
      display: flex;
      align-items: center;
      
      .action-icon {
        font-size: 24rpx;
        margin-right: 8rpx;
      }
      
      .action-text {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
}

.advice-card {
  margin-bottom: 30rpx;
  
  .advice-header {
    margin-bottom: 20rpx;
    
    .doctor-info {
      display: flex;
      align-items: center;
      
      .doctor-avatar {
        font-size: 48rpx;
        margin-right: 15rpx;
      }
      
      .doctor-details {
        .doctor-name {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          margin-bottom: 4rpx;
        }
        
        .doctor-title {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
  
  .advice-content {
    .advice-title {
      display: block;
      font-size: 30rpx;
      font-weight: 600;
      margin-bottom: 15rpx;
    }
  }
}
</style>